<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:bm="http://localhost:8080/customTags">

    <rich:modalPanel id="addPanel" autosized="true" width="450">
            <f:facet name="header">
                <h:outputText value="Add new Product" />
            </f:facet>
            <f:facet name="controls">
                <h:panelGroup>
                    <h:graphicImage value="/images/modal/close.png" id="hidelink2"
                                    styleClass="hidelink" />
                    <rich:componentControl for="addPanel" attachTo="hidelink2"
                                           operation="hide" event="onclick" />
                </h:panelGroup>
            </f:facet>
        <h:form id="newForm">
                <h:panelGrid columns="1" id="panel">
                    <a4j:outputPanel ajaxRendered="true">
                        <h:panelGrid columns="3" id="grid">
                            <h:outputText value="Name" />
                            <h:inputText id="name" value="#{product.product.name}" />
                            <rich:message  for="name" style="color:red" />
                            <h:outputText id="description" value="Description" />
                            <h:inputText value="#{product.product.description}" />
                            <h:message  for="description" style="color:red" />
                            <h:outputText value="Stock Price" />
                            <h:inputText id="stockPrice" value="#{product.product.stockPrice}"
                                         label="Stock Price" immediate="true" />
                            <h:message  for="stockPrice"  style="color:red"/>
                            <h:outputText id="retailPrice" value="Retail Price" />
                            <h:inputText value="#{product.product.retailPrice}"
                                         label="Retail Price" immediate="true" />
                            <h:message  for="retailPrice"  style="color:red"/>
                            <h:outputText value="Credit Price" />
                            <h:inputText id="creditPrice" value="#{product.product.creditPrice}"
                                         label="Credit Price" immediate="true" />
                            <h:message  for="creditPrice" style="color:red" />
                            <h:outputText value="Default Category" />
                            <h:selectOneMenu id="defaultCategory" value="#{product.product.defaultCategory}"
                                             label="Default Category">
                                <f:selectItems value="#{categories.list}"/>
                            </h:selectOneMenu>
                            <h:message  for="defaultCategory"  style="color:red"/>
                            <h:outputText value="S.T.U." />
                            <h:inputText id="smallestTradabeUnit" value="#{product.product.smallestTradabeUnit}"
                                         label="S.T.U."  validator="quantityValidator"/>
                            <h:message  for="smallestTradabeUnit"  style="color:red"/>
                            <h:outputText value="Availability" />
                            <h:inputText id="availability" value="#{product.product.availability}"
                                         label="Availability" />
                            <rich:message  showSummary="true" for="availability"  style="color:red"/>
                        </h:panelGrid>
                    </a4j:outputPanel>
                    <a4j:commandButton value="Store"
                                       action="#{product.add}"
                                       reRender="name, description, stockPrice"
                                       oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('editPanel')}.hide();" />
                </h:panelGrid>
            </h:form>
        </rich:modalPanel>
</ui:composition>